<template>
  <div>
    <el-table :data="devs"  style="width: 100%"  @row-click='handleCurrentChanges' highlight-current-row>
      <el-table-column
        :label="$t('message.name')"
        prop="name">
      </el-table-column>
      <el-table-column
        :label="$t('message.medias.type')"
        prop="type">
      </el-table-column>
      <el-table-column
        :label="$t('message.medias.signalType')"
        prop="signalType">
      </el-table-column>
      <el-table-column  :label="$t('message.medias.resolution')" >
        <template  slot-scope="scope">   
          <span>{{(typeArr.includes(scope.row.type) || typeArr.includes(scope.row.signalType)) ? '': scope.row.resolution.length > 0 ? scope.row.resolution : $t('message.medias.noconnected') }}</span>
        </template> 
      </el-table-column>
      <el-table-column  :label="$t('message.medias.frameRate')" >
        <template  slot-scope="scope">   
          <span>{{(typeArr.includes(scope.row.type) || typeArr.includes(scope.row.signalType)) ? '': scope.row.framerate? scope.row.framerate:0 }}</span>
        </template> 
      </el-table-column>
      <el-table-column  :label="$t('message.medias.loop')" >
        <template  slot-scope="scope">   
          <el-checkbox v-show="scope.row.enabled" v-model="scope.row.isOn" @change="onLoopChanged"></el-checkbox>
        </template> 
      </el-table-column>
    </el-table> 
    <setForm id="2" v-show="showExportEDID">       
       <template slot="boxTop">{{$t('message.medias.audioSetting')}}</template>
          <template slot="boxMain">                
            <el-row>
           <el-col :span="4" class="col4">  
              <div class="span3">            
                <label>{{$t('message.medias.mute')}}</label>   
              </div>
              <div class="span3">            
                <label>{{$t('message.medias.gain')}}</label>   
              </div>
              <div class="span3" v-show="isMic">                 
                <label >{{$t('message.medias.phant')}}</label>  
              </div>
              <div class="span3" v-show="isMic">                                    
                <label v-show="showMicOrLine">{{$t('message.medias.sens')}}</label> 
              </div>                             
            </el-col>
            <el-col :span="20" class="col20a1">
              <div class="span17">
              <el-checkbox v-model="mute"  @change="onLastChange">{{$t('message.medias.mute')}}</el-checkbox>
              </div>
              <div class="span17">
              <el-slider v-model="gain" @change="onLastChange"></el-slider>
              </div>
              <div class="span17" v-show="isMic">
              <el-checkbox v-model="phant" v-show="showMicOrLine" @change="onLastChange" >{{$t('message.medias.phant')}}</el-checkbox>
              </div>
              <div class="span17" v-show="isMic">
              <el-slider v-model="sens" v-show="showMicOrLine" @change="onLastChange"></el-slider>
              </div>
            </el-col>
          </el-row>
          </template>
    </setForm>
    <setForm id="3" v-show="false">       
       <template slot="boxTop">{{$t('message.medias.vedioSetting')}}</template>
          <template slot="boxMain">                
            <el-row>
           <el-col :span="4" class="col4v1">     
              <div class="span3">            
                <label>{{$t('message.medias.signalType')}}</label>   
              </div>
              <div class="span3">            
                <label>{{$t('message.medias.resolution')}}</label>   
              </div>
              <div class="span3">                 
                <label >{{$t('message.medias.frameRate')}}</label>  
              </div>                 
            </el-col>
            <el-col :span="20" class="col20v1">
              <!-- <span>{{currentRow.signalType}}</span>   -->
              <div class="span17">
              <el-input v-model="currentRow.signalType" class="span17_elinput" readonly></el-input>              
              </div>                                                        
            <div class="span17">
              <el-input v-model="currentRow.resolution" v-validate="'valiName'"  type="text" class="span17_elinput" :name="$t('message.medias.resolution')"  readonly></el-input>               
              <span v-show="this.errors.has($t('message.medias.resolution'))" class="text-style" > {{ errors.first($t('message.medias.resolution')) }} </span>  
            </div>                                                          
            <div class="span17">
              <el-input v-model="currentRow.framerate" v-validate="'framerate'"  type="number" class="span17_elinput" :name="$t('message.medias.frameRate')" readonly ></el-input>               
              <span v-show="this.errors.has($t('message.medias.frameRate'))" class="text-style" > {{ errors.first($t('message.medias.frameRate')) }} </span>  
            </div> 
            </el-col>
          </el-row>
          <el-button  class="btnsave" @click="onSaveVedio">{{$t('message.save')}}</el-button>
          </template>
    </setForm>
    <setForm id="4" v-show="false" v-if="!showMicOrLine">       
       <template slot="boxTop">{{$t('message.medias.vedioFastSetting')}}</template>
          <template slot="boxMain">                
           <el-row>
            <el-col :span="4" class="col4">   
               <div class="span3">            
                <label>{{$t('message.medias.bright')}}</label>   
              </div>
              <div class="span3">            
                <label>{{$t('message.medias.saturation')}}</label>   
              </div>
              <div class="span3">                 
                <label >{{$t('message.medias.hue')}}</label>  
              </div>   
              <div class="span3">                 
                <label >{{$t('message.medias.contract')}}</label>  
              </div>                              
            </el-col>
            <el-col :span="20" class="col20v2">                        
            <div class="span17">
               <el-slider v-model="bright" @change="onLastChange"></el-slider>
            </div>                                                          
            <div class="span17">
               <el-slider v-model="saturation" @change="onLastChange"></el-slider>
            </div>                                                          
            <div class="span17">
               <el-slider v-model="hue" @change="onLastChange"></el-slider>
            </div>                                                          
            <div class="span17">
               <el-slider v-model="contrast" @change="onLastChange"></el-slider>
            </div>     
            </el-col>
          </el-row>
          </template>
    </setForm>
    <setForm id="4" v-show="showLoop" v-if="false">       
       <template slot="boxTop">{{$t('message.medias.loop')}}</template>
          <template slot="boxMain">                
           <el-row>
            <el-col :span="4" class="col4">   
               <div class="span3">            
                <label>{{$t('message.medias.loop')}}</label>   
              </div>                           
            </el-col>
            <el-col :span="20" class="col20v2">                        
            <div class="span17">
               <el-checkbox v-bind="currentRow.isOn" @change="onLoopChanged"></el-checkbox>
            </div>  
            </el-col>
          </el-row>
          </template>
    </setForm>
   
  </div>
</template>

<script>
import { api } from "../../../../libs/api";
import setForm from "@/components/setForm";
import mylist from "@/components/MyList";
import ebus from "../../../../libs/ebus";
import { mapState } from "vuex";
import topTable from "../../../../components/topTable";
export default {
  created() {
    this.preventWatchWhenCurChange()
    ebus.emit("getInputDevInfo", this);
    this.interval = setInterval(()=>{
      ebus.emit("getInputDevInfo", this);
    }, 10000)
    this.getLoopBack()
  },
  beforeDestroy(){
    if(this.interval){
      clearInterval(this.interval);
    }
    if(this.curChangeTimer){
      clearTimeout(this.curChangeTimer);
    }
  },
  computed: {
    ...mapState(["media"]),
    ...mapState(["system"]),
    tableData() {
      if (this.media.inputDev.devs) {
        return this.media.inputDev.devs;
      } else{
        return [];
      }
      
    },
    showExportEDID(){
      return this.show && this.curType != 'sdi' && this.curType != ''
    },
    showMicOrLine() {
       return this.typeArr.includes(this.curType);

    },
    isMic() {
      return this.curType == "mic";
    },
    showLoop() {
      return this.currentRow.enabled
    },
    topics() {
      var topics = this.system.topics      
      topics = _.filter(topics, item => {
        return item.topicId.includes('loopback')
      })      
      return topics
    },
    devs () {
      return this.media.inputDev.devs.concat(this.media.inputZsDev.devs);
    }
  },
  watch: {
    mute(newVal, oldVal) {
      this.onAudioChange();
    },
    gain(newVal, oldVal) {
      if (oldVal) {
        this.onAudioChange();
      }
    },
    phant(newVal, oldVal) {
      this.onAudioChange();
    },
    sens(newVal, oldVal) {
      if (oldVal) {
        this.onAudioChange();
      }
    },
    bright: function(newVal, oldVal) {
      if (oldVal && !this.typeArr.includes(this.curType)  && this.currentRow.resolution) {
        this.onVedioChange();
      }
    },
    saturation: function(newVal, oldVal) {
      if (oldVal && !this.typeArr.includes(this.curType)  && this.currentRow.resolution) {
        this.onVedioChange();
      }
    },
    hue: function(newVal, oldVal) {
      if (oldVal && !this.typeArr.includes(this.curType) && this.currentRow.resolution) {
        this.onVedioChange();
      }
    },
    contrast: function(newVal, oldVal) {
      if (oldVal && !this.typeArr.includes(this.curType)  && this.currentRow.resolution) {
        this.onVedioChange();
      }
    }
  },
  data() {
    return {
      curChangeTimer: null,
      interval: null,
      show: false,
      currentRow: {},
      index: 0,
      dev: "",
      devtype: "",
      curType: '',
      mute: false,
      gain: 50,
      sens: 50,
      phant: false,
      typeArr:["mic", "line"],
      resolution: "resolution",
      signalType: "dvi",
      signalTypes: [
        "dvi",
        "hdmi"
        // "vga",
        // "yprpb",
        // "dvi+vga",
        // "dvi+yprpb",
        // "hdmi+vga",
        // "hdmi+yprpb",
        // "sdi"
      ],
      resolutions: ["720P", "1080P", "4K"],
      frameRate: 60,
      bright: 60,
      contract: 60,
      tone: 60,
      saturation: 60,
      hue: 60,
      contrast: 60,
      columns: [
        {
          label: this.$t('message.name'),
          prop: "name"
        },
        {
          label: this.$t('message.medias.type'),
          prop: "type"
        },
        {
          label: this.$t('message.medias.signalType'),
          prop: "signalType"
        },
        {
          label: this.$t('message.medias.resolution'),
          prop: "resolution"
        },
        {
          label: this.$t('message.medias.frameRate'),
          prop: "framerate"
        }
      ]
    };
  },
  components: {
    setForm,
    mylist,
    topTable
  },
  methods: {
    onAudioChange() {
      if(this.isCurRowChange){
        return;
      }
      var option = {
        mute: this.mute? 1: 0,
        gain: this.gain,
        // type: this.currentRow.type,
        sens: this.sens,
        phant: this.phant
      };
      api.onRequest(
        "$method.$set.media.mi.dev" + this.currentRow.index + ".aiParam",
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {     
          var res = JSON.parse(message)     
          if (res.code !== 0) {
            this.showCodeMsg(res.code, this, res.msg);
            // this.notification("error", res.msg);
          } 
        }.bind(this)
      );
    },
    onVedioChange() {
      if(this.isCurRowChange){
        return;
      }
      var option = {
        signalType: this.currentRow.signalType,
        resolution: this.currentRow.resolution,
        framerate: this.currentRow.framerate,
        colorParam: {
          bright: this.bright,
          saturation: this.saturation,
          hue: this.hue,
          contrast: this.contrast
        }
      };
      api.onRequest(
        "$method.$set.media.mi.dev" + this.currentRow.index + ".viParam",
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message)     
          if (res.code !== 0) {
            this.showCodeMsg(res.code, this, res.msg);
          } 
        }.bind(this)
      );
    },
    handleCurrentChanges(val) {
      this.preventWatchWhenCurChange();
      this.mute = val.mute
      this.gain = val.gain
      this.sens = val.sens
      this.phant = val.phant
      if(val.type) {
        this.curType = val.type;
      }else {
        this.curType = val.signalType;
      }
      if(this.curType != 'mic' && this.curType !='line' && this.curType){
        this.bright = val.colorParam.bright
        this.saturation = val.colorParam.saturation
        this.hue = val.colorParam.hue
        this.contrast = val.colorParam.contrast
      }
      

      this.currentRow = val;
      // this.show = true
      this.show = val.resolution === 'sdi' ? false : true;
    },
    onSaveVedio() {
      if (
        this.errors.has(this.$t('message.medias.resolution')) ||
        this.errors.has(this.$t("message.medias.framerate")) 
      ) {
        return;
      }
      var option = {
        signalType: this.currentRow.signalType,
        resolution: this.currentRow.resolution,
        framerate: this.currentRow.framerate,
        colorParam: {
          bright: this.bright,
          saturation: this.saturation,
          hue: this.hue,
          contrast: this.contrast
        }
      };
      api.onRequest(
        "$method.$set.media.mi.dev" + this.currentRow.index + ".viParam",
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message)
          if (res.code == 0) {  
            var tmpTimer = setTimeout(() => {
              this.currentRow = this.media.inputDev.devs[this.currentRow.index]
              clearTimeout(tmpTimer)
            }, 700);       
            this.notification("Success", "");
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }          
          ebus.emit('getInputDevInfo', this);   
        }.bind(this)
      );
    },
    onLastChange(){
      ebus.emit('getInputDevInfo', this);     
    },
    preventWatchWhenCurChange(){      
      this.isCurRowChange = true;
      this.curChangeTimer = setTimeout(() => {
        this.isCurRowChange = false;
      }, 200);     
    },
    getLoopBack() {
      api.onRequest("$method.$get.media.mi.dev0.loopback", null, null, null, (message, reqReply) =>{
          var res = JSON.parse(message)
          ebus.emit('getInputDevInfo', this);   
        }
      );
    },
    onLoopChanged(val){
      api.onRequest(`$method.$set.media.mi.dev${this.currentRow.index}.loopback`, JSON.stringify({isOn: val}), null, null, (message, reqReply) =>{
          var res = JSON.parse(message)
          if (res.code == 0) {
            this.notification("Success", "");
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }
          ebus.emit('getInputDevInfo', this);   
        }
      );
    }
  }
};
</script>

<style scoped>
</style>

